<template>
	<view>
		<view class="plr15">
			<view class="align-center  ptb15 justify-between bdbe">
				<view class="ft15 gray3"><text>{{$t('mine').收货人}}</text></view>
				<view style="flex-basis: 70%;">
					<input type="text" :placeholder="$t('mine').请输入收货人姓名" placeholder-class="ft15"
						placeholder-style="color: #BBBBBB;" v-model="real_name">
				</view>
			</view>
		</view>
		<view class="plr15">
			<view class="align-center  ptb15 justify-between bdbe">
				<view class="ft15 gray3"><text>{{$t('common').电话}}</text></view>
				<view style="flex-basis: 70%;" class="align-center">
					<view class="align-center mr10" @click="navTo('/pages/address/areaCode')">
						<view class="mr5"><text>{{code}}</text></view>
						<image src="../../static/images/address/xiahei.png" mode="aspectFill"
							style="width: 14rpx;height: 8rpx;"></image>
					</view>
					<input type="number" :placeholder="$t('mine').请输入收货人电话" placeholder-class="ft15"
						placeholder-style="color: #BBBBBB;" v-model="phone">
				</view>
			</view>
		</view>
		<view class="plr15">
			<view class="align-center  ptb15 justify-between bdbe">
				<view class="ft15 gray3"><text>{{$t('mine').所在地区}}</text></view>

				<view style="flex-basis: 70%;">
					<picker mode="multiSelector" class="flex1" @change="bindRegionChange"
						@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
						<view class='acea-row'>
							<view v-if="region[0]!=''" class="picker">{{region[0]}}&nbsp;&nbsp;&nbsp;{{region[1]}}&nbsp;&nbsp;&nbsp;{{region[2]}}</view>
							<view v-else class="gray9"><text>{{$t('mine').省市区县乡镇等}}</text></view>
							<view class='iconfont icon-dizhi fontcolor'></view>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="plr15">
			<view class="align-center  ptb15 justify-between bdbe">
				<view class="ft15 gray3"><text>{{$t('mine').详细地址}}</text></view>
				<view style="flex-basis: 70%;">
					<input type="text" :placeholder="$t('mine').请输入街道楼牌号等" placeholder-class="ft15"
						placeholder-style="color: #BBBBBB;" v-model="detail">
				</view>
			</view>
		</view>
		<view class="plr15">
			<view class="align-center  ptb15 justify-between bdbe">
				<view class="ft15 gray3"><text>{{$t('mine').设置默认地址}}</text></view>
				<view>
					<u-switch space="2" v-model="value" activeColor="#F44A42" inactiveColor="rgb(230, 230, 230)">
					</u-switch>
				</view>
			</view>
<!-- 			<view class="align-center  ptb15 justify-between bdbe" v-if="address_id" @click="deleteAddress()">
				<view class="ft15 red"><text>{{$t('mine').删除收货地址}}</text></view>
			</view> -->
		</view>
		<mix-button ref="confirmBtn" :text="$t('common').保存" @onConfirm="save" marginTop="64rpx"></mix-button>

	</view>
</template>

<script>

	export default {
		data() {
			return {
				value: false,



				// 省市区过滤
				region: ['', '', ''],
				valueRegion: [0, 0, 0],
				multiArray: [],
				multiIndex: [0, 0, 0],
				district: '',

				real_name: '',
				phone: '',
				detail: '',
				address_id: '', //地址id
				province_id: '',
				city_id: '',
				district_id: '',
				code:'+86'
			}
		},


		onLoad(options) {
			this.$store.dispatch('getuserInfo')
			this.isadd = options.isadd
			this.address_id = options.address_id
			this.getArea()
			if (options.address_id) {
				this.addressdetailAPI()
			}
			if (this.isadd == 1) {
				uni.setNavigationBarTitle({
					title: this.$t('mine').编辑地址
				})
			}else{
				uni.setNavigationBarTitle({
					title: this.$t('mine').添加地址
				})
			}
			if (uni.getStorageSync('code')) {
				this.code = uni.getStorageSync('code')
			}
		},

		methods: {
			// 选择区号
			chooseCode(item){
				console.log(item)
				this.code = item.code
				uni.setStorageSync('code',this.code)
			},
			// 获取地址详情
			async addressdetailAPI() {
				const res = await this.$api.addressdetail({
					address_id: this.address_id
				})
				this.real_name = res.data.real_name
				this.phone = res.data.phone
				this.real_name = res.data.real_name
				this.region[0] = res.data.province
				this.region[1] = res.data.city
				this.region[2] = res.data.district
				this.province_id = res.data.province_id
				this.city_id = res.data.city_id
				this.district_id = res.data.district_id
				this.detail = res.data.detail
				this.code = res.data.area_code
				// console.log(res.data.is_default==1?'true':'false')
				this.value = res.data.is_default == 1 ? true : false
			},
			// 获取省市区
			async getArea() {
				const res = await this.$api.getcity({
					pid: ''
				})
				this.district = res.data
				this.initialize(); //整理地址
				console.log(this.district)
			},
			// 区域地址的管理
			initialize() {
				let that = this,
					province = [],
					city = [],
					area = [];
				console.log(that.district)
				let cityChildren = that.district[0].children || [];
				let areaChildren = cityChildren.length ? (cityChildren[0].children || []) : [];
				that.district.forEach((item, i) => {
					province.push(item.name);
					if (item.name === this.region[0]) {
						this.valueRegion[0] = i
						this.multiIndex[0] = i
					}
				});

				that.district[this.valueRegion[0]].children.forEach((item, i) => {
					if (this.region[1] == item.children) {
						this.valueRegio[1] = i
						this.multiIndex[1] = i
					}
					city.push(item.name);
				});

				that.district[this.valueRegion[0]].children[this.valueRegion[1]].children.forEach((item, i) => {
					if (this.region[2] == item.children) {
						this.valueRegio[2] = i
						this.multiIndex[2] = i
					}
					area.push(item.name);
				});
				this.multiArray = [province, city, area]
			},
			// 选择确定
			bindRegionChange: function(e) {
				let multiIndex = this.multiIndex,
					province = this.district[multiIndex[0]] || {
						children: []
					},
					city = province.children[multiIndex[1]] || {
						v: 0
					},
					multiArray = this.multiArray,
					value = e.detail.value;
				console.log(multiArray, value)
				this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
				this.province_id = this.district[multiIndex[0]].id || {
						children: []
					},
					this.city_id = province.children[multiIndex[1]].id || {
						v: 0
					},
					this.district_id = city.children[multiIndex[2]].id || {
						v: 0
					},
					console.log(this.province_id, this.city_id, this.district_id)
				// this.$set(this.region,0,multiArray[0][value[0]]);
				// this.$set(this.region,1,multiArray[1][value[1]]);
				// this.$set(this.region,2,multiArray[2][value[2]]);
				// this.cityId = city.v
				this.valueRegion = [0, 0, 0]
				this.initialize();
			},
			// 某一列的值发生了变化
			bindMultiPickerColumnChange: function(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					currentCity = this.district[value] || {
						children: []
					},
					multiArray = that.multiArray,
					multiIndex = that.multiIndex;
				multiIndex[column] = value;
				switch (column) {
					case 0:
						let areaList = currentCity.children[0] || {
							c: []
						};
						multiArray[1] = currentCity.children.map((item) => {
							return item.name;
						});
						multiArray[2] = areaList.children.map((item) => {
							return item.name;
						});
						break;
					case 1:
						let cityList = that.district[multiIndex[0]].children[multiIndex[1]].children || [];
						multiArray[2] = cityList.map((item) => {
							return item.name;
						});
						break;
					case 2:

						break;
				}
				// #ifdef MP || APP-PLUS
				this.$set(this.multiArray, 0, multiArray[0]);
				this.$set(this.multiArray, 1, multiArray[1]);
				this.$set(this.multiArray, 2, multiArray[2]);
				// #endif
				// #ifdef H5 
				this.multiArray = multiArray;
				// #endif
				this.multiIndex = multiIndex
				// this.setData({ multiArray: multiArray, multiIndex: multiIndex});
			},
			// 保存收货地址
			async save() {
				if (!this.real_name) {
					return this.$utils.msg(this.$t('mine').请输入收货人姓名);
				}
				if (!this.phone) {
					return this.$utils.msg(this.$t('mine').请输入收货人电话);
				}
				if (this.region[0] == '') {
					return this.$utils.msg(this.$t('mine').请选择地区)
				}
				if (!this.detail) {
					return this.$utils.msg(this.$t('mine').请输入街道楼牌号等);
				}
				let addObj = {
					real_name: this.real_name,
					area_code: this.code || '+86',
					phone: this.phone,
					province_id: this.province_id,
					detail: this.detail,
					is_default: Number(this.value),
					address_id: this.address_id,
					city_id: this.city_id,
					district_id: this.district_id,
					street_id: this.street_id || ''
				}
				const res = await this.$api.addaddress(addObj)
				if (res && res.code == 1) {
					// uni.navigateTo({
					// 	url: '/pages/address/newAddress?other=2'
					// })
					uni.navigateBack()
				}
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}


</style>